<template>
    <div>
      <h2>房间计划添加页面</h2>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>房间类型</td>
            <td>
              <select v-model="form.roomType">
                <option>请选择</option>
                <option>大床房</option>
                <option>双床房</option>
                <option>情侣套房</option>
                <option>总统套房</option>
                <option>标间</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>设置价格</td>
            <td>
              <input type="text" v-model="form.money" />
            </td>
          </tr>
          <tr>
            <td>酒店名称</td>
            <td>
              <input type="text" v-model="form.name" />
            </td>
          </tr>
          <tr>
            <td>房间数量</td>
            <td>
              <input type="text" v-model="form.houseNumber" />
            </td>
          </tr>
          <tr>
            <td>早餐数量</td>
            <td>
              <input type="text" v-model="form.zaoNumber" />
            </td>
          </tr>
          <tr>
            <td>入住人数数量</td>
            <td>
              <input type="text" v-model="form.people" />
            </td>
          </tr>
          <tr>
            <td>开始时间</td>
            <td>
              <input type="date" v-model="form.benginTime" />
            </td>
          </tr>
          <tr>
            <td>结束时间</td>
            <td>
              <input type="date" v-model="form.jieShuTime" />
            </td>
          </tr>
          <tr>
            <td>房间图片</td>
            <td>
              <img
                :src="form.pic"
                style="display: ''; max-width: 100px; max-height: 100px"
              />
              <input type="file" style="display: ''" id="file" @change="Tupian" />
            </td>
          </tr>
          <tr>
            <td>房价计划状态：</td>
            <td>
              <input type="radio" v-model="form.state" value="1" />上架
              <input type="radio" v-model="form.state" value="2" />下架
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button class="btn btn-primary" @click="Add">添加</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from "axios";
  import { onMounted, reactive, ref } from "vue";
  import { useRouter } from "vue-router";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  const router = useRouter();
  
  const form: any = reactive({
    id: 0,
    roomType: "请选择",
    money: "",
    name: "",
    houseNumber: "",
    zaoNumber: "",
    people: 0,
    benginTime: "",
    jieShuTime: "",
    isDeleted: true,
    pic: "",
    state: 0,
  });
  
  const Add=()=>{
      if(!form.roomType){
          alert("类型不能为空");
          return;
      }
      if(!form.money){
          alert("价格不能为空");
          return;
      }
      if(!form.name){
          alert("酒店名称不能为空");
          return;
      }
      if(!form.houseNumber){
          alert("房间数量不能为空");
          return;
      }
      if(!form.zaoNumber){
          alert("早餐数量不能为空");
          return ;
      }
      axios.post("https://localhost:7015/api/Price/Addprice",form).then(res=>{
          if(res.data>0){
              alert("添加 成功");
              router.push("/showprice");
          }
          else
          {
              alert("添加失败");
          }
      })
  
  }
  
  const Tupian=(e:any)=>{
      var formData=new FormData();
      var file=e.target.files[0];
      formData.append("file",file);
      axios.post("https://localhost:7015/api/Price",formData).then(res=>{
          form.pic=res.data;
      }).catch(err=>{
          console.log(err)
      })
  
  
  
  }
  
  
  
  
  </script>
  
  <style scoped></style>
  